<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div style="width: 1200px;margin: auto">
    <h4>
        [[${session.loginUser == null ? "" : session.loginUser.name+"欢迎您"}]]
    </h4>
    <div style="margin: 5px; float: right;">
        <a class="btn btn-default" role="button" th:href="@{/turnAddBook}">添加书籍</a>
    </div>
    <table class="table table-hover">
        <tr>
            <th>序号</th>
            <th>编号</th>
            <th>书名</th>
            <th>作者</th>
            <th>价格</th>
            <th>操作</th>
        </tr>
        <tr th:each="book,stats:${books}">
            <td th:text="${stats.count}"></td>
            <td th:text="${book.getId()}"></td>
            <td th:text="${book.getName()}"></td>
            <td th:text="${book.getAuthor()}"></td>
            <td th:text="${book.getPrice()}"></td>
            <td>
                <!--@{/queryUserById/{id}(id=${user.getId()})}:路径后可以跟参数，之后需要用括号说明参数的值是什么-->
                <a role="button" th:href="@{/findBookById/{id}(id=${book.getId()})}">修改</a>
                <a role="button" th:href="@{/deleteBook/{id}(id=${book.getId()})}">删除</a>
            </td>
        </tr>
    </table>
</div>
</body>
</html>